<template>
  <Form ref="loginForm" :model="form" :rules="rules" class="loginForm" @keydown.enter.native="handleSubmit">
    <FormItem prop="userName">
      <Input v-model="form.userName" prefix="ios-person" placeholder="请输入用户名" size="large"/>
    </FormItem>
    <FormItem prop="password">
      <Input type="password" password prefix="md-lock" v-model="form.password" placeholder="请输入密码" size="large"/>
    </FormItem>
    <FormItem prop="validCode">
      <Input v-model="form.validCode" prefix="ios-apps" class="captcha" placeholder="请输入验证码" size="large"/>
      <div class="Imgbox">
        <img :src="captchaUrl" class="captchaImg" @click="getCaptcha">
      </div>
    </FormItem>
    <FormItem>
      <Button :loading="loading" @click="handleSubmit" type="primary" long size="large">{{btnText}}</Button>
    </FormItem>
  </Form>
</template>
<script>
  import {getCodeImg} from "@/api/login";
  export default {
    name: 'LoginForm',
    props: {
      userNameRules: {
        type: Array,
        default: () => {
          return [
            {required: true, message: '账号不能为空', trigger: 'blur'}
          ]
        }
      },
      passwordRules: {
        type: Array,
        default: () => {
          return [
            {required: true, message: '密码不能为空', trigger: 'blur'}
          ]
        }
      },
      validCodeRules: {
        type: Array,
        default: () => {
          return [
            {required: true, message: '验证码不能为空', trigger: 'blur'}
          ]
        }
      },
      loading: {
        type: Boolean,
        default: false
      },
      btnText: {
        type: String,
        require: false,
        default: "登录"
      }
    },
    data() {
      return {
        form: {
          userName: '',
          password: '',
          validCode: '',
          validCodeId: ''
        },
        captchaUrl: ''
      }
    },
    computed: {
      rules() {
        return {
          userName: this.userNameRules,
          password: this.passwordRules,
          validCode: this.validCodeRules
        }
      }
    },
    methods: {
      handleSubmit() {
        this.$refs.loginForm.validate((valid) => {
          if (valid) {
            this.$emit('on-success-valid', {
              userName: this.form.userName,
              password: this.form.password,
              validCode: this.form.validCode,
              validCodeId: this.form.validCodeId
            })
          }
        })
      },
      getCaptcha() {
        getCodeImg().then(res => {
          this.captchaUrl = "data:image/gif;base64," + res.data.data.img;
          this.form.validCodeId = res.data.data.uuid;
        });
      }
    },
    mounted() {
      this.getCaptcha();
    }
  }
</script>
<style lang="less">
  .loginForm {
    .ivu-input-group-prepend {
      .prefix {
        width: 13px;
        height: 13px;
      }
    }

    .captcha {
      width: 65%;
    }

    .Imgbox {
      width: 90px;
      height: 40px;
      float: right;
      padding: 1px;
      background-color: #e3e3e3;
      border-radius: 3px;
      .captchaImg {
        width: 100%;
        height: 100%;
      }
    }
  }
</style>
